
<template>
  <div>
    <a-form :form="form">
      <a-form-item label="任务名称"
                   :labelCol="labelCol"
                   :wrapperCol="wrapperCol">
        <a-input v-decorator="decorator.taskName" />
      </a-form-item>
      <a-form-item label="开始时间"
                   :labelCol="labelCol"
                   :wrapperCol="wrapperCol">

        <a-date-picker style="width: 100%"
                       v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
      </a-form-item>
    </a-form>
    {{msg}}
    <!-- 表格 -->
    <standard-table ref="tableChildren"
                    :pagination="false"
                    :columns="columns"
                    :bordered=true
                    :dataSource="dataSource"
                    @change="onChange">
      <span slot="tags">
        313213
      </span>
    </standard-table>
    <div style="text-align:center">
      <a-button @click="onOk">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </div>

    <a-button @click="qiantao">123</a-button>
  </div>
</template>

<script>
import { StandardTable } from '@/common/components'
import { decorator } from './decorator'
import { columnsData } from './cloumns.js'
export default {
  name: 'TaskForm',
  components: { StandardTable },
  inject: ['close', 'self'],
  props: {
    record: {
      type: Object,
      default: null
    },
    msg: {
      type: String
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: this.$form.createForm(this),
      decorator: Object.freeze(decorator),
      columns: Object.freeze(columnsData(this.$createElement, this)),
      dataSource: []
    }
  },
  methods: {
    onOk () {
      return new Promise(resolve => {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            this.$emit('ok', values)
          }
        })
      })
    },
    qiantao (record) {
      let tem = `<div>
        <h2>自定义标题</h2>
        <p>是否确定查看自定义数据</p>
      </div>`
      this.$dialog(tem,
        // modal props
        { title: '弹窗三' }
      )
    },
    cancel () {
      console.log(this)
      this.$attrs._cancel()
      // this.dialogInstance.modalClose()
    }
  }
}
</script>
